<template>
  <Loading :loading="loading">
    <div>
      <NavBar>
        <template slot="content">
          <div>{{ detailInfo.title }}</div>
        </template>
      </NavBar>
      <div class="cotent">
        <div class="review-detail-video" :style="{ height: contentHeight }">
          <div>
            <video
              ref="video"
              id="video"
              class="review-detail-video"
              :style="{ height: contentHeight }"
              controls
              autoplay
              muted
              controlslist="nodownload"
              disablePictureInPicture
              playbackRate
            >
              <source type="video/mp4" :src="videoPath" />
              您的浏览器不支持 HTML5 video 标签。
            </video>
          </div>
          <!-- <div
            class="review-detail-video-share"
            @click="$refs.shareWx.show = true"
            v-if="isWeChatBrowser || isApp"
          >
            <img src="./img/share.png" />
          </div> -->
          <!-- <select name="rate" id="selectRate" ref="selectRate">
              <option value="0.5">0.5</option>
              <option value="1" selected>1.0</option>
              <option value="1.25">1.25</option>
              <option value="1.5">1.5</option>
              <option value="2">2.0</option>
            </select> -->
        </div>
        <div class="operatBtn">
          <div class="flexBtn rate">
            <!-- <van-field
              readonly
              clickable
              title="速率"
              label="速率"
              :value="value"
              placeholder="选择播放速率"
              @click="showPicker = true"
            /> -->
            <div :value="value" @click="showPicker = true">
              倍速:{{ value }}
            </div>
            <van-popup v-model="showPicker" round position="bottom">
              <van-picker
                show-toolbar
                :columns="columns"
                @cancel="showPicker = false"
                @confirm="onConfirm"
              />
            </van-popup>
          </div>
          <div class="flexBtn">
            <div v-if="videoPlay" @click="playVideo">
              播放
              <van-icon name="pause-circle-o" />
            </div>
            <div v-else @click="playVideo">
              暂停
              <van-icon name="play-circle-o" />
            </div>
          </div>
          <div class="flexBtn" @click="handleFullScreen">
            全屏
            <van-icon name="scan" />
          </div>
        </div>

        <!-- <div class="review-detail-footer">{{ detailInfo.title }}</div> -->
        <ShareWx ref="shareWx" @handleShare="handleShare" />
      </div>
    </div>
  </Loading>
</template>
<script>
import API from '@/services/h5/review'
import NavBar from '@/components/h5header'
import Loading from '@/components/data-loading'
import ShareWx from '@/components/ShareWx'
import { isApp } from '@/utils/platform'
import { isWeChatBrowser } from '@/config/h5/index'
import weixinShare from '@/services/h5/app-api/weixinShare.js'
import { mapState, mapMutations } from 'vuex'
export default {
  components: { NavBar, Loading, ShareWx },
  data() {
    return {
      isWeChatBrowser,
      isApp,
      detailInfo: {
        title: ''
      },
      show: false,
      contentHeight: '',
      contentHeightVideo: '',
      value: '1',
      showPicker: false,
      columns: ['0.5', '1', '1.25', '1.5', '2'],
      videoPlay: true,
      exitFullscreen: false
    }
  },
  computed: {
    ...mapState('loading', ['loading']),
    videoPath() {
      return this.$route.query.videoPath
    }
  },
  async mounted() {
    this.setLoading(true)
    this.init()
    this.getClickNumber()
    this.setLoading(false)
  },
  /* beforeUpdate() {
    //监听选择框事件
    let selDom = this.$refs.selectRate;
    let selVideo = this.$refs.video
    selDom.addEventListener('change',function() {
      selVideo.playbackRate = this.value
      selVideo.play()
      console.log(11111)
    })
  }, */
  methods: {
    ...mapMutations('loading', ['setLoading']),
    init() {
      let data = window.innerHeight + 'px'
      this.contentHeight = `calc(${data} - 36px - 50px - 20px`
      this.contentHeightVideo = `calc(${data} - 36px - 50px - 20px - 44px`
      if (isWeChatBrowser) {
        document.title = this.$route.query.videoName
        this.contentHeight = `calc(${data} - 50px - 20px`
        this.contentHeightVideo = `calc(${data} - 50px - 20px - 44px`
      }
      this.detailInfo.title = this.$route.query.videoName
      //  自动播放视频
      let video = document.getElementById('video')
      document.body.addEventListener(
        'mousedown',
        function () {
          // 静音解除
          video.muted = false
        },
        false
      )
    },
    async getClickNumber() {
      let params = {
        id: this.$route.query.id
      }
      await API.addClick(params)
    },
    onConfirm(value) {
      console.log('value的值：', value)
      let selVideo = this.$refs.video
      this.value = value
      selVideo.playbackRate = this.value
      selVideo.play()
      this.showPicker = false
    },
    playVideo() {
      let selVideo = this.$refs.video
      this.videoPlay = !this.videoPlay
      if (this.videoPlay) {
        selVideo.play()
      } else {
        selVideo.pause()
      }
      console.log(this.showPicker)
    },

    // 全屏事件
    handleFullScreen() {
      let video = this.$refs.video
      if (video.requestFullscreen) {
        // 最新标准
        video.requestFullscreen()
      } else if (video.webkitRequestFullscreen) {
        video.webkitRequestFullscreen()
      } else {
        // iOS进入全屏
        video.webkitEnterFullscreen()
        // 针对iOS监听不到webkitfullscreenchange事件做的兼容，感知退出全屏
        let timer = setInterval(() => {
          if (!video.webkitDisplayingFullscreen) {
            // 退出了全屏
            clearInterval(timer)
          }
        }, 1000)
      }

      // 状态判断，PC Chrome
      document.addEventListener(
        'webkitfullscreenchange',
        evt => {
          if (!video.webkitDisplayingFullscreen) {
            // 退出全屏
            console.log(evt)
          }
        },
        false
      )

      // 全屏状态改变事件，Android
      document.addEventListener(
        'webkitfullscreenchange',
        evt => {
          if (!document.webkitIsFullScreen && evt.srcElement === video) {
            // 退出全屏
          }
        },
        false
      )
    },
    handleShare(val) {
      weixinShare({
        shareType: val,
        titleName: '回放',
        describe: '回放视频详情',
        imageUrl: this.$route.query.videoLogoPath,
        shareUrl: window.location.href
      })
    },
    handleClose() {
      this.$router.replace('/review')
    }
  }
}
</script>
<style scoped lang="less">
.review-detail-video {
  width: 375px;
  height: 660px;
  position: relative;
  &-share {
    position: absolute;
    bottom: 55px;
    right: 17px;
    img {
      width: 26px;
      height: 24px;
    }
  }
}
.review-detail-footer {
  width: 375px;
  height: 65px;
  background: #37313a;
  font-size: 18px;
  color: #fff;
  padding: 23.5px 15px;
  line-height: 1;
  box-sizing: border-box;
}
.review-detail-popup {
  height: 119px;
  padding: 20px 0;
  text-align: center;
  font-size: 15px;
  color: #666;
  &-item {
    &:last-child {
      margin-top: 20px;
    }
  }
  &-item-text {
    margin-left: 9px;
  }
  &-item-img-we {
    width: 28px;
    height: 23px;
  }
  &-item-img-friend {
    width: 26px;
    height: 26px;
  }
}
/deep/ .van-cell {
  background-color: #37313a;
  color: #37313a;
  .van-field__control {
    color: white;
  }
}
/deep/ .van-icon {
  position: relative;
  transform: translateY(15%);
}
.operatBtn {
  background: #37313a;
  color: white;
  font-size: 18px;
  height: 65px;
  text-align: center;
  display: flex;
  align-items: center;
}
.flexBtn {
  flex: 1;
}
</style>
